<template>
     <div  
        v-loading="loading"  
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading" 
        element-loading-background="rgba(0, 0, 0, 0.8)"
        class="card_box">
     
        <div class="card_title flex">
             <div class="flex detail overflow">
               <img class="card_title_icon" :src="require('@/assets/'+icon)" alt="">
               <h3 class="card_title_name overflow" >{{title}}</h3>
             </div>
             <el-button icon="el-icon-refresh-left" v-if="refresh"  @click="refresh_" id="refreshButton" class="FontWeight">刷新</el-button>
        </div>
        <slot name="body"></slot>
        <slot name="time"></slot>
       
   </div>
</template>
<script>
  export default 
  {
     name :'', 
     props:{
        "title":{
            default:'自定义'
        },
        "icon":{
            default:'default/information/Article.png'
        },
        "refresh":{
            default:null
        }
     },
     data() {
        return {
            loading:false,
        }
     },
     methods:{
       async  refresh_(){
            if(this.refresh == null)
              return  this.$message.warning('功能暂时未实现')
            this.loading =true
            let res = await this.refresh()
            if(res?.code !=200) this.$message.error(res.message || 'error')
            let timer = setTimeout(() => {
                this.loading=false
                clearTimeout(timer)
            }, 500);
         }
     }
    
  }
</script>
<style scoped lang='less'>
.FontWeight{
    font-size: 17px;
    color: var(--fontColor);
}
// 盒子
.card_box{
  width: 100%;
  padding: 20px 10px;
  box-sizing: border-box;
  border-radius: 10px;
  box-shadow: var(--BoxShadow);
  overflow: hidden;
  background: var(--Pattern);
  opacity: 0.9;
  margin-bottom: 20px;
}
// 标题
.card_title{
    width: 100%;
    justify-content: space-between;
    margin-bottom: 10px;
    flex-wrap: nowrap;
    .detail{
         flex-wrap: nowrap;
    }
    // 标题内容
    .card_title_name{ 
       font-size: 20px;
       font-family: blog;
       font-weight: normal;
       color: var(--fontColor);
    }
    //图标
    .card_title_icon{
        width: 30px;
        height: 30px;
        margin-right: 5px;
    }
    //刷新按钮
    #refreshButton{
        background: none;
        border: none;
    }
}
</style>